<template>
    <div>
        <div class="cart-header">
            <div class="back"></div>
            <h2>购物车</h2>
            <div class="edit">编辑</div>
        </div>
        <div class="cart-main">
            <div class="check">
                <label>
                    <input type="checkbox" class="checkbox" id="checkAll1">
                    <i></i>全选
                </label>
            </div>

            <div class="shop-list" id="shop-list">
                <div class="list" v-for="(item, index) in data" :key="index">
                    <label>
                        <input type="checkbox" class="checkbox" :checked="item.isChecked">
                        <i></i>
                    </label>
                    <a href="javascript:;">
                        <img :src="item.imgSrc" alt="">
                    </a>
                    <div class="desc">
                        <a href="javascript:;" class="title">{{item.title}}</a>
                        <div class="spec-box">
                            <div class="spec">规格：
                                <span v-for="(items, indexs) in item.spec" :key="indexs">{{items}}</span>
                            </div>
                            <div class="num-wrap">
                                <div @click="item.num>1?item.num--:item.num" class="reduce"></div>
                                <input type="text" v-model="item.num">
                                <div @click="item.num++" class="add"></div>
                            </div>
                        </div>
                        <div class="price-box">
                            <div class="price">￥
                                <span class="rmb">{{item.price}}</span>
                            </div>
                            <div class="free">免运费</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-paybar">
            <div class="left">
                <label>
                    <input type="checkbox" class="checkbox" id="checkAll2">
                    <i></i>全选
                </label>
                <div class="total-wrap">
                    <div class="total">合计：
                        <span class="money">￥
                            <i id="total">378.00</i>
                        </span>
                    </div>
                    <div class="fare">含运费</div>
                </div>
            </div>
            <div class="pay">结算</div>
        </div>
     <div class="cart-menubar">
        <router-link to="/index" class="list">
            <span class="icon icon-home"></span>
            <i>首页</i>
         </router-link>
        <router-link to="/pro_categories" class="list">
            <span class="icon icon-type"></span>
            <i>分类</i>
         </router-link>
        <router-link to="/shop-cart" class="list on">
            <span class="icon icon-shop"></span>
            <i>购物车</i>
        </router-link>
        <router-link to="/order" class="list">
            <span class="icon icon-order"></span>
            <i>我的订单</i>
        </router-link>
        <router-link to="user" class="list">
            <span class="icon icon-user"></span>
            <i>我</i>
        </router-link>
    </div>

    </div>
</template>

<script>
import shopCart from "../datas/shopCartDatas.js";
export default {
  name: "shopCart",
  data() {
    return {
      data: shopCart
    };
  }
};
</script>

<style scoped lang='less'>
// @import url("./css/shop_cart.css");
@import "./css/shop_cart.less";
</style>